import React, { useEffect, useState } from 'react';
import { Button, Space, Table, Tag, Drawer, Form, Input, Select, message } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import * as user from '../../../api/user'
function Role(props: any) {

    interface DataType {
        key: string;
        name: string
        rolename: string;
        people: string;
        remake: string;
        states: number;
        id: string;

    }

    // 创建列表渲染数据
    const [tableData, setTableData] = useState<DataType[]>([])

    // 表格列表
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            key: 'num',
            render: (_, record) => <span>{tableData.indexOf(record) + 1}</span>
        },
        {
            title: '角色名称',
            dataIndex: 'rolename',
            key: 'rolename',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '人数',
            dataIndex: 'people',
            key: 'people',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '备注',
            dataIndex: 'remake',
            key: 'remake',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '状态',
            dataIndex: 'states',
            key: 'states',
            render: (text) => <span>{text == 0 ? '启用' : '禁用'}</span>,
        },
        {
            title: '操作',
            key: 'id',
            render: (_, record: any) => (
                <Space size="middle" >
                    <Button onClick={() => { onEdit(record) }}>编辑</Button>
                    <Button danger onClick={() => { onDelete(record) }}>删除</Button>
                </Space>
            ),
        },
    ]

    // 用户列表
    let userlist = async () => {
        var res = await user.system_role_list()
        console.log(res)
        setTableData(res.data.data)
    }
    useEffect(() => {
        userlist();
    }, [])

    // 设置抽屉开关
    const [open, setOpen] = useState(false);
    // 设置添加编辑开关
    const [flag, setFlag] = useState(true)
    // 开启抽屉
    let onOpen = () => {
        console.log(flag);
        setOpen(true)
    }
    // 关闭抽屉
    let onClose = () => {
        setOpen(false)
        setFlag(true)
        form.setFieldsValue({ name: '', rolename: '', people: '', remake: '', state: '' })
    }
    // 表单验证成功
    let onFinish = async (values: any) => {
        if (flag) {
            console.log(flag);
            console.log(values);
            var res = await user.system_role_add(values)
            userlist()
            message.success('新增成功', 2, onClose)
        } else {
            console.log(flag)
            let newobj = { id, ...values }
            var res = await user.system_role_edit(newobj)
            userlist()
            message.success('修改成功', 2, onClose)


        }
    }
    // 表单验证失败
    let onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo)
        message.error('新增失败', 2, onClose)
    }
    // 删除用户
    let onDelete = async (id: any) => {
        var res = await user.system_role_delete(id)
        console.log(res)
        userlist()
        message.success('删除成功', 2)
    }
    // 编辑用户
    var [form] = Form.useForm()
    // 保存id
    const [id, setId] = useState()
    let onEdit = (item: any) => {
        console.log(item)
        setOpen(true)
        setFlag(false)

        setId(item.id)
        form.setFieldsValue(item)
        userlist()
    }
    return (
        <div className='role'>
            <div style={{ width: '100%', padding: ' 0 0 0 20px', boxSizing: 'border-box', borderBottom: '1px solid #ddd' }}>
                <h3>角色管理</h3>
            </div>
            <Space style={{ margin: 20 }}>
                <Button type="primary" onClick={onOpen}>新增</Button>
            </Space>
            <Table columns={columns} dataSource={tableData} rowKey={"id"} />
            <Drawer title="设置" placement="right" onClose={onClose} open={open}>
                <Form
                    name="basic"
                    form={form}
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                >
                    <Form.Item
                        label="角色名称"
                        name="rolename"
                        rules={[{ required: true, message: '请选择角色' }]}
                    >
                        <Input disabled={!flag} />
                    </Form.Item>
                    <Form.Item
                        label="人数"
                        name="people"
                        rules={[{ required: true, message: '请输入人数' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="备注"
                        name="remake"
                    // rules={[{ required: false, message: '请选择部门' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="状态"
                        name="states"
                        rules={[{ required: true, message: '请选择状态' }]}
                    >
                        <Select
                            style={{ width: 220 }}
                            options={[
                                { value: 0, label: '启用' },
                                { value: 1, label: '禁用' }
                            ]}
                        />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Form.Item>
                </Form>
            </Drawer>
        </div>
    );
}

export default Role;